import { IEchartsData } from '@/model/echarts/echartsInter'
import { categoryData, dataFlag, noSeries, stackData, valueMax } from '@/utils/echartsCommonFun'
import {
  EChartsOption,
  GridOption,
  BarSeriesOption,
  TooltipOption,
  XAXisOption,
  YAXisOption
} from 'echarts/types/dist/shared'
import { ItemStyleOption } from 'echarts/types/src/util/types'

export function Chart (datas:IEchartsData) {
  const series = []
  let category:Array<string> = []
  let max = 0
  // let unit:string = ''
  const flag = dataFlag(datas.data)
  if (flag > 0 && flag === datas.data.length) { // 没有数据
    series.push(noSeries())
  } else {
    datas.data.forEach((data, index) => {
      let value:Array<{name:string, value:number}> = []
      if (data.value) {
        value = data.value
        value.forEach(item => {
          category = categoryData(category, item.name)
          max = valueMax(max, item.value)
        })
      }
      // unit = data.unit ? data.unit : ''
      if (index === datas.data.length - 1) { // 堆叠图 选中最后一项
        series.push({
          name: data.name ? data.name : '',
          type: 'bar',
          data: value,
          stack: 'stack',
          barWidth: '30%',
          barMaxWidth: 15,
          smooth: true,
          symbol: 'none',
          itemStyle: {
            borderRadius: [20, 20, 0, 0]
          } as ItemStyleOption,
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        } as BarSeriesOption)
      } else {
        series.push({
          name: data.name ? data.name : '',
          type: 'bar',
          data: value,
          stack: 'stack',
          barWidth: '30%',
          barMaxWidth: 15,
          smooth: true,
          symbol: 'none',
          animationDuration: 2800,
          animationEasing: 'cubicInOut'
        })
      }
      if (stackData(JSON.parse(JSON.stringify(datas.data))).length > 0) {
        max = 0
        stackData(JSON.parse(JSON.stringify(datas.data))).forEach(s => {
          if (s.value.length > 0) {
            s.value.forEach(v => {
              max = valueMax(max, v.value)
            })
          }
        })
      }
    })
  }
  return {
    color: ['#F7517F', '#F43469', '#C02464', '#A71E4E'],
    xAxis: xAxis(category, true),
    yAxis: yAxis(max),
    grid: grid(),
    tooltip: tooltip(),
    series: series
  } as EChartsOption
}

function xAxis (data: Array<string>, boundaryGap?: boolean | Array<string>) {
  return {
    show: true,
    data: data,
    boundaryGap: boundaryGap || false
  } as XAXisOption
}

function yAxis (max:number) {
  const yAxis:YAXisOption = {
    show: true,
    axisLine: {
      show: true
    },
    axisTick: {
      show: false
    }
  }
  if (max) {
    yAxis.max = parseInt(String(max * 1.1))
  }
  return yAxis
}

function grid () {
  return {
    left: 0,
    right: 15,
    top: 20,
    bottom: 0,
    containLabel: true
  } as GridOption
}

function tooltip () {
  return {
    trigger: 'axis',
    confine: true,
    axisPointer: {
      textStyle: {
        color: '#fff'
      }
    }
  } as TooltipOption
}
